<template>
	<view>

		<view class="" style="position: fixed;top: 0;width: 100%;background-color: #fff;">
			<HMFilterDropdown @newArea="newArea" :newAreaShow="true" @searchFatFn="searchFatFn" :filterData="filterData" :defaultSelected="defaultSelected"
				@confirm="confirm">
			</HMFilterDropdown>
		</view>

		<view class="seekList" style="padding-top: 150rpx;">
			<view v-for="(item,index) in lists" :key="index" class="seekItem modelBox"
				@click="$util.redirectTo('/otherpages/seekDetali/seekDetali',{id:item.id})">
				<!-- 面议 -->
				<view class="flex_b">
					<view class="font-28">{{item.title||'暂无数据'}}</view>
					<view class="font-28 f-t" v-if="Number(item.total_price)">{{item.total_price||0}}元/月</view>
					<view class="font-28 f-t" v-else>面议</view>
				</view>
				<view class="flex m-t-20">
					<view class="m-r-62">
						<view class="font-24 m-b-10">{{item.province||''}}{{item.city||''}}</view>
						<view class="font-24 grey">位置</view>
					</view>
					<view class="m-r-62">
						<view class="font-24 m-b-10">{{arrs[Number(item.seeking_type)+1]}}</view>
						<view class="font-24 grey">类型</view>
					</view>
					<view class="">
						<view class="font-24 m-b-10">{{item.area}}m²</view>
						<view class="font-24 grey">面积</view>
					</view>
				</view>
			</view>
		</view>

		<uv-load-more :status="loadStatus" />

	</view>
</template>

<script>
	import HMFilterDropdown from "@/uni_modules/HM-filterDropdown/components/HM-filterDropdown/HM-filterDropdown"
	export default {
		components: {
			HMFilterDropdown
		},
		data() {
			return {
				arrs: ['商业街店铺', '写字楼', '社区电商', '临街门面', '档口摊位', '购物百货中心', '其他'],
				industry_id: 'all',
				search: '',
				lists: [],
				district: '',
				city: '',
				area: 'all',
				type: 'all',
				status: 'all',
				monthrent: 'all',
				keyword: '',
				transfer_fee: 'all',
				filterData: [{
						"name": '区域',
						"type": 'hierarchy-column',
						"submenu": [{
							"name": "不限",
							"value": "all"
						}, ]
					},

					{
						"name": '月租',
						"type": 'filter',
						"submenu": [{
							"name": '月租',
							"submenu": [{
									"name": "不限",
									"value": "all"
								},
								{
									"name": "2千以内",
									"value": "1"
								},
								{
									"name": "2千-5千",
									"value": "2"
								},
								{
									"name": "5千-1万",
									"value": "3"
								},
								{
									"name": "1万-1.5万",
									"value": "4"
								},
								{
									"name": "1.5万-2万",
									"value": "5"
								},
								{
									"name": "2万以上",
									"value": "6"
								}
							]
						}, ]
					},
					{
						"name": '转让费',
						"type": 'filter',
						"submenu": [{
							"name": '转让费',
							"submenu": [{
									"name": '不限',
									"value": "all",
								},
								{
									"name": '5万以下',
									"value": "1",
								},
								{
									"name": '5-10万',
									"value": "2",
								},
								{
									"name": '10-20万',
									"value": "3",
								},
								{
									"name": '20-50万',
									"value": "4",
								},
								{
									"name": '50万以上',
									"value": "5",
								}
							]
						}, ]
					},
					{
						"name": '面积',
						"type": 'filter',
						"submenu": [{
							"name": '面积',
							"submenu": [{
									"name": "不限",
									"value": "all"
								},
								{
									"name": "20以内",
									"value": "1"
								},
								{
									"name": "20-50",
									"value": "2"
								},
								{
									"name": "50-100",
									"value": "3"
								},
								{
									"name": "100-150",
									"value": "4"
								},
								{
									"name": "200-500",
									"value": "5"
								},
								{
									"name": "500以上",
									"value": "6"
								}
							]
						}, ]
					},
					{
						"name": '行业',
						"type": 'filter',
						"submenu": [{
							"submenu": []
						}, ]
					},
				],
				defaultSelected: [
					[3, 0, 1], //第0个菜单选中 一级菜单的第6项，二级菜单的第0项，三级菜单的第1项
					[2, 0, 1], //第1个菜单选中 一级菜单的第2项，二级菜单的第0项，三级菜单的第1项
					[1], //第2个菜单选中 一级菜单的第1项 一级菜单的第1项
					[
						[0],
						[1, 2, 7],
						[1, 0]
					], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
					[
						[0],
						[1],
						[1]
					] //单选菜
				],
				loadShow: true,
				loadStatus: 'loadmore',
				pageNum: 1,
				min_area: '',
				max_area: '',
				min_month_rent: '',
				max_month_rent: '',
				min_transfer_fee: '',
				max_transfer_fee: '',
			};
		},
		onShow() {

			this.lists = []
			this.loadShow = true,
				this.loadStatus = 'loadmore',
				this.pageNum = 1

			uni.getStorage({
				key: 'city',
				success: res => {
					this.getLists()
					this.city = res.data
					this.filterData[0].name = res.data
				},
				fail: err => {
					this.city = ''
					this.getLists()
				}
			})
		},
		onReachBottom() {
			// 触底加载
			this.getLists()
		},
		onLoad() {
			this.getHomeDetali()
		},
		methods: {
			// 筛选确定
			confirm(e) {
				// 转让费
				if (e.min_transfer_fee && e.min_transfer_fee) {
					this.min_transfer_fee = e.min_transfer_fee
					this.max_transfer_fee = e.max_transfer_fee
					this.filterData[2].name = this.min_transfer_fee + '-' + this.max_transfer_fee
				} else {
					this.min_transfer_fee = ''
					this.max_transfer_fee = ''
				}
			
			
				if (e.min_month_rent && e.max_month_rent) {
					this.min_month_rent = e.min_month_rent
					this.max_month_rent = e.max_month_rent
					this.filterData[1].name = this.min_month_rent + '-' + this.max_month_rent
				} else {
					this.min_month_rent = ''
					this.max_month_rent = ''
				}
			
				if (e.min_area && e.max_area) {
					this.min_area = e.min_area
					this.max_area = e.max_area
					this.filterData[3].name = this.min_area + '-' + this.max_area
				} else {
					this.min_area = ''
					this.max_area = ''
				}
			
			
			
				this.lists = []
				this.loadShow = true,
					this.loadStatus = 'loadmore',
					this.pageNum = 1
				if (e.value[0].length && e.index[0][0] != null) {
					// 地区
					this.city = e.value[0][0]
					this.district = e.value[0][1]
				}
			
				if (e.value[1].length && e.index[1][0].length) {
					// 月租
					if (!this.min_month_rent) {
						this.filterData[1].name = this.filterData[1].submenu[0].submenu[e.index[1][0]].name
					}
					this.monthrent = e.value[1][0][0]
				}
				if (e.value[2].length && e.index[2][0] != null && e.index[2][0].length) {
					// 转让费
					if (!this.min_transfer_fee) {
						this.filterData[2].name = this.filterData[2].submenu[0].submenu[e.index[2][0]].name
					}
			
					this.transfer_fee = e.value[2][0][0]
				}
				if (e.value[3].length && e.index[3][0].length) {
					// 面积
					if (!this.min_area) {
						this.filterData[3].name = this.filterData[3].submenu[0].submenu[e.index[3][0]].name
					}
					this.area = e.value[3][0][0]
				}
				if (e.value[4].length && e.index[4][0].length) {
					// 行业
					this.filterData[4].name = this.filterData[4].submenu[0].submenu[e.index[4][0]].name
					this.industry_id = e.value[4][0][0]
				} else {
					this.filterData[4].name = '行业'
					this.industry_id = 'all'
				}
			
				this.getLists()
			},
			// 搜索
			searchFatFn(e) {
				this.lists = []
				this.loadShow = true,
					this.loadStatus = 'loadmore',
					this.pageNum = 1
				this.search = e
				this.getLists()
			},
			// 列表
			getLists() {
				this.$api.sendRequest({
					url: '/api/sitingrent/lists',
					data: {
						page: this.pageNum,
						num: 10,
						search: this.search,
						city: this.city || 'all',
						district: this.district || 'all',
						monthrent: this.monthrent,
						area: this.area,
						transfer_fee: this.transfer_fee,
						industry_id: this.industry_id,
						min_area: this.min_area,
						max_area: this.max_area,
						min_month_rent: this.min_month_rent,
						max_month_rent: this.max_month_rent,
						min_transfer_fee: this.min_transfer_fee,
						max_transfer_fee: this.max_transfer_fee,
					},
					success: res => {
						this.lists.push(...res.data.data)
						if (res.data.data.length < 10) {
							this.loadShow = false
							this.loadStatus = 'nomore'
							return
						}
						this.pageNum++
						this.loadShow = true
						this.$forceUpdate()
					}
				})
			},
			// 根据开通区域的id查下面的区
			getArea(id, i) {
				this.$api.sendRequest({
					url: '/api/index/area',
					data: {
						area_id: id
					},
					success: res => {
						let arrs = this.filterData[0].submenu[i].submenu
						arrs.push({
							name: '不限',
							value: 'all',
						})
						res.data.forEach((item, i) => {
							arrs.push({
								name: item.name,
								value: item.name,
							})
						})
						this.filterData[0].submenu[i].submenu = arrs
					}
				})

			},
			// 配置信息
			getHomeDetali() {
				this.$api.sendRequest({
					url: '/api/index/index',
					success: res => {
						// 获取市+区
						res.data.operatearea.forEach((item, i) => {
							this.filterData[0].submenu.push({
								name: item.city,
								value: item.city,
								submenu: [],
								id:item.id
							})
							// this.getArea(item.id, i + 1)
						})
						this.getArea(res.data.operatearea[0].id, 1)
						// 获取行业 industry
						res.data.industry.forEach((item, i) => {
							this.filterData[4].submenu[0].submenu.push({
								name: item.name,
								value: item.id,
							})
						})
						this.$forceUpdate()
					}
				})
			},
			
			newArea(id, i) {
				this.getArea(id, i)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.seekList {
		.seekItem {}
	}

	.anliList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.anliItem {
		width: 334rpx;
		height: 316rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 8rpx rgba(0, 19, 41, 0.08);
		margin-bottom: 20rpx;

		image {
			width: 334rpx;
			height: 176rpx;
		}
	}

	.icon-xiajiantou {
		font-size: 22rpx;
		color: #9299a3;
		margin-left: 8rpx;

	}
</style>
